<template>
	<el-dialog title="系统信息修改" :visible.sync="dialogVisible" width="800px" @close="handleClose"
		:close-on-click-modal="false">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>系统信息修改</span>
		</div>

		<div class="smp-search" v-if="dialogVisible">
			<el-form :inline="false" label-width="140px" size="mini" ref="form" :model="form" :rules="rules">

				<el-row>
					<el-col :span="24">
						<el-col :span="12">
							<el-form-item label="系统编号:" required="true">
								<el-input v-model="form.systemNo" :disabled="true" placeholder="系统编号"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="系统名称:" prop="systemName">
								<el-input v-model="form.systemName" placeholder="系统名称"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="所属机构:" prop="systemOrg">
								<el-select v-model="form.systemOrg"  filterable  style="width: 100%" placeholder="所属机构" >
									<!-- <el-option v-for="item in dict('SMP0016')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option> -->
									<el-option v-for="item in orgListAll" :key="item.seqCate" :label="item.orgName" :value="item.seqCate"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="系统简称:" prop="systemShort">
								<el-input v-model="form.systemShort" placeholder="系统简称"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="系统类别:" prop="systemType">
								<el-select @change="systemTypeChange"   v-model="form.systemType" style="width: 100%" placeholder="系统类型">
									<el-option v-for="item in dict('SMP0014')" :key="item.itemCode"
										:label="item.itemName" :value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="负责人:" prop="systemResponsibleMan">
								<el-select v-model="form.systemResponsibleMan" style="width: 100%" filterable remote
									reserve-keyword placeholder="负责人" :remote-method="getUsers" >
									<el-option v-for="item in userList" :key="item.userName"
										:label="item.userChineseName" :value="item.userName">
										<span style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.department }}</span>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="测试应用IP:" prop="testAddr">
								<el-input v-model="form.testAddr" placeholder="测试应用IP"></el-input>
							</el-form-item>
						</el-col>

					<el-col :span="12">
						<el-form-item label="关联ESB地址:" prop="esbAddr" >
							
							<el-select v-if="esbAddrVisible" v-model="form.esbAddr" style="width: 100%" placeholder="关联ESB地址" >
								<!-- <el-option v-for="item in dict('SMP0016')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option> -->
								<el-option v-for="item in esbEnvironmentList" :key="item.ip" :label="item.ip+'('+dictName(item.esbFlg,'SMP0031')+')'" :value="item.ip"></el-option>
							</el-select>
							
						</el-form-item>
					</el-col>
					

						<!-- <el-col :span="12">
							<el-form-item label="生产应用IP:" prop="prodAddr">
								<el-input v-model="form.prodAddr" placeholder="生产应用IP"></el-input>
							</el-form-item>
						</el-col> -->

						<el-col :span="12">
							<el-form-item label="关联需求号:" prop="associatedRequirement">
								<el-input v-model="form.associatedRequirement" placeholder="关联需求号"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="报文格式:" prop="msgAgreement">
<!-- 								<el-input v-model="form.msgAgreement" placeholder="报文格式"></el-input>
 -->							<el-autocomplete placeholder="请选择或输入报文协议"  style="width: 100%;" :fetch-suggestions="fetchProtocal" v-model="form.msgAgreement" class="inline-input"></el-autocomplete>
							
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="报文编码:" prop="msgCode">
								<el-select v-model="form.msgCode" style="width: 100%" placeholder="报文编码">
									<el-option v-for="item in dict('SMP0004')" :key="item.itemCode"
										:label="item.itemName" :value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>

					

						<el-col :span="12">
							<el-form-item label="系统状态:" prop="systemStatus">
								<el-select v-model="form.systemStatus" style="width: 100%" placeholder="系统状态">

									<el-option v-for="item in dict('SMP0002')" :key="item.itemCode"
										:label="item.itemName" :value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						
						<el-col :span="22">
							<el-form-item label="默认ESB业务路由:" prop="busPath">
								<el-select v-model="form.busPath" style="width: 100%" filterable remote reserve-keyword
									placeholder="请输入业务路由"
									:loading="proLoading"
									@change="proChange"
									:remote-method="getBusPathList" >
									<el-option v-for="item in busPathList" :key="item.sourcePath" :label="item.sourcePath" :value="item.sourcePath">
										<span style="float: left;margin-left: 3px;">{{ item.sourcePath }}</span>
									      <span style="float: right;margin-right: 3px;">{{ item.sourceName }}</span>
									
									</el-option>
								</el-select>
								
							<!-- 	<el-input v-model="form.esbBusPath" placeholder="ESB业务路由"></el-input>
								 -->
							</el-form-item>
						</el-col>
						
						<el-col :span="2" >
							<el-button size="mini" plain type="primary"  @click="addbusPath" > 创建 </el-button>
						</el-col>
						
						<el-col :span="22">
							<el-form-item label="默认OESB业务路由:" prop="oesbBusPath">
								
								<el-select v-model="form.oesbBusPath" style="width: 100%" filterable remote reserve-keyword
									placeholder="请输入业务路由"
									:loading="proLoading"
									@change="proChange"
									:remote-method="getoesbBusPathList" >
									<el-option v-for="item in oesbbusPathList" :key="item.sourcePath" :label="item.sourcePath" :value="item.sourcePath">
										<span style="float: right;margin-right: 3px;">{{ item.sourceName }}</span>
										<span style="float: left;margin-left: 3px;">{{ item.sourcePath }}</span>
									</el-option>
								</el-select>
								
								
								<!-- <el-input v-model="form.oesbBusPath" placeholder="OESB业务路由"></el-input> -->
							</el-form-item>
						</el-col>
						
						<el-col :span="2" >
							<el-button size="mini" plain type="primary"  @click="addoesbbusPath" > 创建 </el-button>
						</el-col>

						<!-- <el-col :span="12">

							<el-form-item label="创建时间:" required="true">

								<el-date-picker style="width: 100%" v-model="form.createTime" disabled="false"
									type="date" placeholder="选择日期">
								</el-date-picker>

							</el-form-item>

						</el-col> -->
					</el-col>
				</el-row>


			</el-form>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" type="primary" @click="onSubmit">确定</el-button>
			<el-button size="mini" @click="closeDialog">取消</el-button>
		</span>
		
		<addESBSource ref="addESBSource" @changebusPath="changebusPath" @changeoesbbusPath="changeoesbbusPath"  />
		
	</el-dialog>
</template>

<script>
	"use strict";
	import {
		updateSystemInfo
	} from '@/api/service.js';
	import {getEsbEnvironmentByEsbFlg} from '@/api/environment.js';
		import {getproList,getproListBysourcePath} from '@/api/source.js';
	import addESBSource from './addESBSource';
	export default {


		data() {
			return {
				esbAddrVisible:true,
				dialogVisible: false,
				esbEnvironmentList:[],
				rules: {
					systemName: [{
						required: true,
						message: "系统名称不能为空",
						trigger: ['blur', 'change']
					}],
					systemShort: [{
						required: true,
						message: "系统简称不能为空",
						trigger: ['blur', 'change']
					}],
					systemResponsibleMan: [{
						required: true,
						message: "负责人不能为空",
						trigger: ['blur', 'change']
					}],
					testAddr: [{
						required: false,
						message: "测试应用IP不能为空",
						trigger: ['blur', 'change']
					}],
					esbAddr: [{
						required: true,
						message: "ESB测试IP不能为空",
						trigger: ['blur', 'change']
					}],
					associatedRequirement: [{
						required: false,
						message: "关联需求号不能为空",
						trigger: ['blur', 'change']
					}],
					msgAgreement: [{
						required: true,
						message: "报文格式不能为空",
						trigger: ['blur', 'change']
					}],
					msgCode: [{
						required: true,
						message: "报文编码不能为空",
						trigger: ['blur', 'change']
					}],
					systemType: [{
						required: true,
						message: "系统类型不能为空",
						trigger: ['blur', 'change']
					}],
					systemStatus: [{
						required: true,
						message: "系统状态不能为空",
						trigger: ['blur', 'change']
					}],
				},
				busPathList:[],
				oesbbusPathList:[],
				form: {
					systemNo: '',
					systemName: '',
					systemOrg: '',
					systemShort: '',
					systemResponsibleMan: '',
					testAddr: '',
					prodAddr: '',
					esbAddr: '',
					associatedRequirement: '',
					msgAgreement: '',
					msgCode: '',
					systemStatus: '',
					systemType: '01',
					createTime: '',
					busPath:'',
					oesbBusPath:'',
					
					
				},

			};
		},
		
		created() {
			this.getEsbEnvironmentList();
		},
		
		components: {
					
					addESBSource
				},


		methods: {
	addbusPath(){
		this.$refs.addESBSource.showDialog("03",this.sourceFolder,"01");
	},
	addoesbbusPath(){
		this.$refs.addESBSource.showDialog("03",this.sourceFolder,"02");
	},
							
			getBusPathList(query){
				if(query!=''){
					this.proLoading = true;
					getproList({"sourcePath":query,"sourceType":"03","esbFlg":"01"}).then(response => {
					this.busPathList = response.data.extend;
					this.proLoading = false;
				});
				}else{
					
					this.busPathList = [];
				}
			},
			
			getoesbBusPathList(query){
				if(query!=''){
					this.proLoading = true;
					getproList({"sourcePath":query,"sourceType":"03","esbFlg":"02"}).then(response => {
					this.oesbbusPathList = response.data.extend;
					this.proLoading = false;
				});
				}else{
					this.oesbbusPathList = [];
				}
			},
			changebusPath(sourcePath){
				//alert("dsgdfgdg");
				getproList({"sourcePath":sourcePath,"sourceType":"03","esbFlg":"01"}).then(response =>{
					this.busPathList = response.data.extend;
					this.form.busPath = sourcePath
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				})
			},
			
			changeoesbbusPath(sourcePath){
				getproList({"sourcePath":sourcePath,"sourceType":"03","esbFlg":"02"}).then(response =>{
					this.oesbbusPathList = response.data.extend;
					this.form.oesbBusPath = sourcePath
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				})
			},
			
			fetchProtocal(queryString,cb){
			var protocals = [{value:"socket/xml"},{value:"http/json"},{value:"http/soap"},{value:"https/json"},{value:"定长"},{value:"分隔符"},{value:"其他"}];
				
				var protocals1 =
				protocals1  = queryString? protocals.filter(item=>{
					
					return item.value.indexOf(queryString)>-1;
				}):protocals;
				cb(protocals1);
			},
			systemTypeChange(){
				this.getEsbEnvironmentList();
			},
			getEsbEnvironmentList() {
				//this.form.esbAddr = null;
				 /* let system = this.$store.getters.getSystem(this.form.systemNo); */
				 let systemType= this.form.systemType=='01'?'01':'02';
				this.esbAddrVisible = false;
				getEsbEnvironmentByEsbFlg({esbFlg:systemType}).then(response => {
					this.esbEnvironmentList = response.data.extend
					let  lists =  this.esbEnvironmentList.filter(item=>item.ip == this.form.esbAddr)
					if(lists.length ==0){
						this.form.esbAddr = ""
					}
					this.$nextTick(()=>{
						//this.form.esbAddr = this.esbEnvironmentList[0].ip
						this.esbAddrVisible = true;
					});
					
				})
			},

			onSubmit() {
				this.updateSystemInfo();
			},


			updateSystemInfo() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						updateSystemInfo(this.form).then(response => {
							/* this.data = response.data.extend; */
							this.$message({
						duration:5000,
								type: 'success',
								message: '系统修改成功！'
							});
							this.dialogVisible = false;
							this.$emit("refresh");


						}).catch(error => {
							this.$message({
						duration:5000,								type: 'error',
								message: '系统修改失败！'
							});
							this.dialogVisible = false;
							this.$emit("refresh");
						});
					}
				})

			},

			showDialog(row) {
				//this.form = row;
				Object.assign(this.form,row);
				this.getUsers(this.form.systemResponsibleMan);
				this.dialogVisible = true;

			},

			closeDialog() {
				this.dialogVisible = false;
			},

			handleClose() {
				this.dialogVisible = false;
			}


		},

	}
</script>

<style>
</style>
